<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet" type="text/css" media="screen" />
<title>Write Recipe</title>
<jsp:useBean class="com.food.model.Foodsearch" id="caBean">
</jsp:useBean>
 <style>
 	#page1{
 	width:1000px;
 	height:auto;
 	background:#DFFFDF;
 	border-radius:45px;
 	-moz-border-radius:45px;
 	-webkit-border-radius:45px;
 	margin: 0 auto;
	padding: 30px 20px 0 20px;
	border-width:rough; 
	border-style:dashed;
	border-color:#00BB00;
 	}
	#putright{
	float:right;
	width:400px;
	}
	#putleft{ 
	float:left;
	width:500px;
	}
	#a{
	width:80px;
	}
	th{
	width:80px;
	}
	#tb1{
	padding:0 0 0 60px;
	}
	#tb2{ 
	padding:0 80px 0 0; 
	}
 </style>
 <script src="<c:url value="/js/jquery-1.9.1.min.js" />"></script>
 <script type="text/javascript">
 $(function(){
	 $('#sub').click(function(e){
			var answer = confirm("確定送出?");
			
			if (!answer){
				e.preventDefault();
			}
	    });
	 
	 var step;
	 $('#addStep').click(function(){
		 	step = parseInt($('input[name="step"]:last').val())+1;
		 	//alert(step);
     		$('#div1').before('<tr><th><input type="hidden" name="step" value="'+step+'">'+step+'.</th><td><textarea name="sword" cols="40" palceholder="輸入作法" rows="4"></textarea><input type="file" name="simg"></td></tr>');
        });
	 
	 $('#delStep').click(function(){
		 $('#div1').prev(1).detach();
		 
     });
	 
	 $('#addIngredients').click(function(){
		 var ingredients = parseInt($('input[name="ingredients"]:last').val())+1;
		 $('#div2').before('<tr><th><input type="hidden" name="ingredients" value="'+ingredients+'">'+ingredients+'.</th><td><input type="text" name="fdname" autofocus placeholder="      食 材 名 稱    " size="15"  maxlength="30">&nbsp<input type="text" name="fdunit" autofocus placeholder="    份    量   " size="8"  maxlength="30"></td></tr>');
	 });
	 
	 $('#delIngredients').click(function(){
		 $('#div2').prev(1).detach();
		 
     });
	 
	 $('#select1').change(function(){
		 $('#option1').empty();
	 if($('#select1').val()=='A'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'A'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 if($('#select1').val()=='B'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'B'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 if($('#select1').val()=='C'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'C'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 if($('#select1').val()=='D'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'D'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 if($('#select1').val()=='E'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'E'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 if($('#select1').val()=='F'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'F'},
    				function(data){
    			$('#option1').append(data);
    		});
	 }
	 });
	 $('#select2').change(function(){
		 $('#option2').empty();
	 if($('#select2').val()=='A'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'A'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 if($('#select2').val()=='B'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'B'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 if($('#select2').val()=='C'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'C'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 if($('#select2').val()=='D'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'D'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 if($('#select2').val()=='E'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'E'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 if($('#select2').val()=='F'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'F'},
    				function(data){
    			$('#option2').append(data);
    		});
	 }
	 });

	 $('#select3').change(function(){
		 $('#option3').empty();
	 if($('#select3').val()=='A'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'A'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 if($('#select3').val()=='B'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'B'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 if($('#select3').val()=='C'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'C'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 if($('#select3').val()=='D'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'D'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 if($('#select3').val()=='E'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'E'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 if($('#select3').val()=='F'){
		 var url = "foodcategory.jsp";
    		$.post(url,{'category':'F'},
    				function(data){
    			$('#option3').append(data);
    		});
	 }
	 });
 });

 </script>
</head>
<body>
<!-- 引入共同的頁首 -->
<c:set var="funcName" value="IND" scope="session"/>
<jsp:include page="/top/top.jsp" />

<!-- 從這裡開始寫 -->
<div id="page1">
	<form action="<c:url value="/recipe/RecipeInsertServlet" />" method="post" enctype="multipart/form-data">
	<div id="putleft">
		<table id="tb1">
		<tr>
			<th>&nbsp完成圖片:</th>
     		<td><input type="file" name="rimg"></td>
		</tr>
		<tr>
			<th><font style="font-size:0.5cm;color:red">*</font>食譜名稱:</th>
			<td><input type="text" name="rname" autofocus placeholder="請輸入食譜名稱" size="15" required maxlength="30"></td>
		</tr>
		<tr>
			<th><font style="font-size:0.5cm;color:red">*</font>食譜簡介:</th>
			<td><textarea name="rintroduce" cols="35" placeholder="食譜簡介" rows="6"></textarea></td>
		</tr>
		<%-- 
			<tr>
				<th>&nbsp小&nbsp撇&nbsp步:</th>
				<td><textarea cols="30" rows="5" name="rtrick"></textarea></td>			
		 </tr>
		 --%>
		<tr>
			<th><font style="font-size:0.5cm;color:red">*</font>國&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp籍:</th>
			<td><input type="radio" name="countryid" value="1">日式料理
				<input type="radio" name="countryid" value="2">美式料理
				<input type="radio" name="countryid" value="3">中式料理
				<input type="radio" name="countryid" value="4">韓式料理<br>
				<input type="radio" name="countryid" value="5">義式料理
				<input type="radio" name="countryid" value="6">南洋料理
				<input type="radio" name="countryid" value="7" checked>其他類別
			</td>
		</tr>
		<tr>
		  <th><font style="font-size:0.5cm;color:red">*</font>主要食材:</th>
			<td><font style="font-size:0.35cm;color:red">(選擇1-3種主要食材類別作為此食譜的分類)</font>
			<br/>
				<select name="category" id="select1">
						<option>分類</option>
						<option value="A">肉類</option>
						<option value="B">海鮮</option>
						<option value="C">蔬菜</option>
						<option value="D">甜點</option>
						<option value="E">主食</option>
						<option value="F">其他</option>
				</select>

				<select name='fsid' id="option1">
						<option>品項</option>
						
				</select>
				
				<br/>
				<select name="category" id="select2">
						<option>分類</option>
						<option value="A">肉類</option>
						<option value="B">海鮮</option>
						<option value="C">蔬菜</option>
						<option value="D">甜點</option>
						<option value="E">主食</option>
						<option value="F">其他</option>
				</select>
				
				<select name='fsid' id="option2">
						<option>品項</option>
						
				</select>
				<br/>
				<select name="category" id="select3">
						<option>分類</option>
						<option value="A">肉類</option>
						<option value="B">海鮮</option>
						<option value="C">蔬菜</option>
						<option value="D">甜點</option>
						<option value="E">主食</option>
						<option value="F">其他</option>
				</select>
				
				<select name='fsid' id="option3">
						<option>品項</option>
						
				</select>
				
			</td>
			
	     </tr>
	     
	      <tr>
	     </tr>
	     <tr>
	     	<th>做法</th>
	     </tr>
	     <tr>
	     </tr>
	     <tr>
	     	<th><input type="hidden" name="step" value="1">1.</th>
	     	<td><textarea name="sword" cols="40" rows="4"></textarea>
	     	<input type="file" name="simg">
	     	</td>
	     </tr>
	     
	   <tr id="div1"><th></th>
	   <td><input type="button" value="增加步驟" name="addStep" id="addStep">
	   <input type="button" value="移除步驟" name="delStep" id="delStep">
	   </td></tr>
	   
		<tr>
			<td></td>
			<td align="right">
			
			<input type="submit" id="sub" value="送出" name="btn">
			<a href="<c:url value='/index.jsp' />">
			<input type="reset" value="取消" name="btn">
			</a>
			</td>
		</tr>	
		
		</table>
		</div>
		
		<div id="putright">
		<table id="tb2">
		 <tr>
	   		  	<th id="a">&nbsp需要食材:</th>
	     </tr>
	     <tr>
	     </tr>
	     <tr>
					<th><input type="hidden" name="ingredients" value="1">1.</th>
				 	<td><input type="text" name="fdname" autofocus placeholder="      食 材 名 稱    " size="15" required maxlength="30">&nbsp
					<input type="text" name="fdunit" autofocus placeholder="    份    量   " size="8" required maxlength="30">
					</td>
	     </tr>
	     
	     <tr id="div2"><th></th><td><input type="button" value="增加食材" name="addIngredients" id="addIngredients">
	     <input type="button" value="移除食材" name="delIngredients" id="delIngredients">
	     </td></tr>
	     

	    
		</table>
		</div>
		
		
	</form>
	
<div style="clear: both;">&nbsp;</div>

</div>
<!-- 寫到這裡結束 -->

<div id="footer-wrapper">
	<div id="footer">
		<p>Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.</p>
	</div>
</div>
</body>
</html>